﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="jquery.qtip.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>    
    <script src="jquery.qtip.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#divDialog").dialog();

            $('input[title]').qtip({
                style: {
                    classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
                }
            });

            $('#link').qtip({
                style: {
                    classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
                }
            });

            $('input[title]').qtip({
                show: 'focus',
                style: {
                    widget: true
                    //classes: 'ui-tooltip-cluetip ui-tooltip-shadow ui-tooltip-rounded'


                    //                    ui-tooltip-shadow{ } /* Adds a shadows to your tooltips */
                    //                    ui-tooltip-rounded{ } /* Adds a rounded corner to your tooltips */
                    //                    ui-tooltip-bootstrap{ } /* Bootstrap style */
                    //                    ui-tooltip-tipsy{ } /* Tipsy style */
                    //                    ui-tooltip-youtube{ } /* Youtube style */
                    //                    ui-tooltip-jtools{ } /* jTools tooltip style */
                    //                    ui-tooltip-cluetip{ } /* ClueTip style */
                    //                    ui-tooltip-tipped{ } /* Tipped style */

                },
                events: {
                    focus: function (event, api) {


                    }

                }
            });
        });
    </script>
</head>
<body>
    <h3>Testando o plugin qTip passe o <a href="#" title="Informações e dicas aqui">mouse por aqui</a></h3>
    <h3>Novo teste - <a id="link" href="#" title="Informações e dicas aqui">mouse por aqui</a></h3>
    <input title="Informações de uma textbox" />


    <div id="divDialog">Dialog here</div>
</body>
</html>
